<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta content="no-cache" http-equiv="Cache-Control">
    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=2.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-tel-web-app-capable">
    <meta content="telephone=no" name="format-detection">
    <title>Document</title>
    <link rel="stylesheet" href="../css/swiper.min.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/swiper.jquery.min.js"></script>

    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            height:100%;
        }
        body{
            font-family:"microsoft yahei";
        }
        .swiper-container {
          /*  width: 320px;
            height: 480px;*/
            width: 100%;
            height: 100%;
            background:#000;

          
        }  

        .swiper-slide{
            width:100%;
            height:100%;
            background:url(upload/bg.jpg) no-repeat left top;
            background-size:100% 100%;

        }
        img{
            display:block;
        }
        .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        background: #fff;
        opacity: .4;
        }
        .swiper-pagination-bullet-active {
        opacity: 1;
        }
        @-webkit-keyframes start {
            0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}
            60% {opacity: 1;-webkit-transform: translate(0,0);}
            100% {opacity: 0;-webkit-transform: translate(0,-8px);}
        }
        @-moz-keyframes start {
            0%,30% {opacity: 0;-moz-transform: translate(0,10px);}
            60% {opacity: 1;-moz-transform: translate(0,0);}
            100% {opacity: 0;-moz-transform: translate(0,-8px);}
        }
        @keyframes start {
            0%,30% {opacity: 0;transform: translate(0,10px);}
            60% {opacity: 1;transform: translate(0,0);}
            100% {opacity: 0;transform: translate(0,-8px);}
        }
        .ani{
            position:absolute;
            }
        .txt{
            position:absolute;
        }
        #array{
            position:absolute;z-index:999;-webkit-animation: start 1.5s infinite ease-in-out;
        }
</style>
</head>
<body>
        <div class="swiper-container swiper-container-vertical">
    <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(0px, -1440px, 0px);">

        <section class="swiper-slide swiper-slide1" style="height: 480px; opacity: 0.5; transform: translate3d(0px, 360px, -360px) scaleY(0); transition-duration: 0ms;">

        <img src="upload/bonus_01.png" class="ani resize     " style="width: 320px; height: 43px; left: 0px; top: 30px; z-index: 3; visibility: hidden;" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0s" swiper-animate-style-cache="width:320px;height:43px;left:0px;top:30px;z-index:3;"> 
        <img src="upload/bonus_02.jpg" class="ani resize     " style="width: 320px; height: 27px; left: 0px; top: 75px; z-index: 3; visibility: hidden;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" swiper-animate-style-cache="width:320px;height:27px;left:0px;top:75px;z-index:3;"> 
        <img src="upload/001.png" class="ani resize     " style="width: 320px; height: 188px; left: 0px; top: 140px; z-index: 2; visibility: hidden;" swiper-animate-effect="rotateInDownLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2s" swiper-animate-style-cache="width:320px;height:188px;left:0;top:140px;z-index:2;"> 
        <img src="upload/002.png" class="ani resize     " style="width: 320px; height: 188px; left: 0px; top: 140px; z-index: 1; visibility: hidden;" swiper-animate-effect="bounceInDown" swiper-animate-duration="1.5s" swiper-animate-delay="2.5s" swiper-animate-style-cache="width:320px;height:188px;left:0px;top:140px;z-index:1;">
        <img src="upload/003.png" class="ani resize     " style="width: 320px; height: 112px; left: 0px; top: 320px; z-index: 1; visibility: hidden;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="4s" swiper-animate-style-cache="width:320px;height:112px;left:0px;top:320px;z-index:1;">
        
        </section>
 
        <section class="swiper-slide swiper-slide2" style="height: 480px; opacity: 0.5; transition-duration: 0ms; transform: translate3d(0px, 240px, -240px) scaleY(0);">
        <img src="upload/004.png" class="ani resize               " style="width: 320px; height: 64px; left: 0px; top: 10px; z-index: 5; visibility: hidden;" swiper-animate-effect="bounce" swiper-animate-duration="0.5s" swiper-animate-delay="0s" swiper-animate-style-cache="width:320px;height:64px;left:0px;top:10px;z-index:5; "> 
      <img src="upload/005.png" class="ani resize               " style="width: 320px; height: 42px; left: 0px; top: 100px; z-index: 4; visibility: hidden;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" swiper-animate-style-cache="width:320px;height:42px;left:0px;top:100px;z-index:4;"> 
        <img src="upload/006.png" class="ani resize               " style="width: 320px; height: 264px; left: 0px; top: 160px; z-index: 3; visibility: hidden;" swiper-animate-effect="zoomInDown" swiper-animate-duration="0.5s" swiper-animate-delay="1s" swiper-animate-style-cache="width:320px;height:264px;left:0px;top:160px;z-index:3;"> 
        
        </section>

        <section class="swiper-slide swiper-slide3 swiper-slide-prev" style="height: 480px; opacity: 0.5; transition-duration: 0ms; transform: translate3d(0px, 120px, -120px) scaleY(0.5);">
        
        <img src="upload/007.png" class="ani resize     " style="width: 320px; height: 66px; left: 0px; top: 30px; z-index: 5; visibility: hidden;" swiper-animate-effect="bounce" swiper-animate-duration="0.5s" swiper-animate-delay="0s" swiper-animate-style-cache="width:320px;height:66px;left:0px;top:30px;z-index:5; "> 
      <img src="upload/008.png" class="ani resize     " style="width: 320px; height: 192px; left: 0px; top: 220px; z-index: 4; visibility: hidden;" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s" swiper-animate-style-cache="width:320px;height:192px;left:0px;top:220px;z-index:4;"> 
        <img src="upload/009.png" class="ani resize     " style="width: 320px; height: 77px; left: 0px; top: 110px; z-index: 3; visibility: hidden;" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" swiper-animate-style-cache="width:320px;height:77px;left:0px;top:110px;z-index:3;"> 
        <img src="upload/010.png" class="ani resize     " style="width: 320px; height: 192px; left: 0px; top: 220px; z-index: 2; visibility: hidden;" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" swiper-animate-style-cache="width:320px;height:192px;left:0px;top:220px;z-index:2;"> 
       
        
        </section>

        <section class="swiper-slide swiper-slide4 swiper-slide-active" style="height: 480px; opacity: 1; transition-duration: 0ms; transform: translate3d(0px, 0px, 0px) scaleY(1);">
        <img src="upload/001.jpg" class="ani resize                 fadeInDown animated" style="width: 320px; height: 46px; left: 0px; top: 20px; z-index: 2; visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:0s;-webkit-animation-delay:0s;" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0s" swiper-animate-style-cache="width:320px;height:46px;left:0;top:20px;z-index:2;"> 
        <img src="upload/002.jpg" class="ani resize                 zoomInLeft animated" style="width: 320px; height: 327px; left: 0px; top: 100px; z-index: 1; visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:0.5s;-webkit-animation-delay:0.5s;" swiper-animate-effect="zoomInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" swiper-animate-style-cache="width:320px;height:327px;left:0px;top:100px;z-index:1;">
 
        </section>
    </div>
    
   <img src="images/arrow.png" style="width:20px;height:15px; top:460px; left:150px;" id="array" class="resize"> 
  <div class="swiper-pagination"><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span></div>  
</div>
</body>
<script>  

    scaleW=window.innerWidth/320;
    scaleH=window.innerHeight/480;
    var resizes = document.querySelectorAll('.resize');
              for (var j=0; j<resizes.length; j++) {
               resizes[j].style.width=parseInt(resizes[j].style.width)*scaleW+'px';
               resizes[j].style.height=parseInt(resizes[j].style.height)*scaleH+'px';
               resizes[j].style.top=parseInt(resizes[j].style.top)*scaleH+'px';
               resizes[j].style.left=parseInt(resizes[j].style.left)*scaleW+'px'; 
              }
              
      var mySwiper = new Swiper ('.swiper-container', {
       direction : 'vertical',
       pagination: '.swiper-pagination',
      //virtualTranslate : true,
       mousewheelControl : true,
       onInit: function(swiper){
       swiperAnimateCache(swiper);
       swiperAnimate(swiper);
          },
       onSlideChangeEnd: function(swiper){
        swiperAnimate(swiper);
        },
        onTransitionEnd: function(swiper){
        swiperAnimate(swiper);
        },
        
        
        watchSlidesProgress: true,

          onProgress: function(swiper){
            for (var i = 0; i < swiper.slides.length; i++){
              var slide = swiper.slides[i];
              var progress = slide.progress;
              var translate = progress*swiper.height/4;  
              scale = 1 - Math.min(Math.abs(progress * 0.5), 1);
              var opacity = 1 - Math.min(Math.abs(progress/2),0.5);
              slide.style.opacity = opacity;
              es = slide.style;
              es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,'+translate+'px,-'+translate+'px) scaleY(' + scale + ')';

            }
          },
        
           onSetTransition: function(swiper, speed) {
            for (var i = 0; i < swiper.slides.length; i++){
              es = swiper.slides[i].style;
              es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = speed + 'ms';

            }
          },
        
        
        
           })         
  </script>
</html>